<template>
  <div class="page">
    <div class="lesson-order">
      <!-- <div height="100%" ref="my_scroller" :noDataText="noDataText" class="grey-stage"> -->
        <div class="no-data-tip" v-if="!courseOrders.length">{{ noDataText }}</div>
        <group v-for="(course, index) in courseOrders" :key="index">
          <cell title="订单号" :value="course.order_sn"></cell>
          <cell title="购买金额" :value="(course.price/100) | moneyFormate"></cell>
          <div class="weui-cell vux-cell-form-preview">
            <div class="weui-form-preview__bd">
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">课包名称</label>
                <span class="weui-form-preview__value">{{ course.package_name }}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">课包课时</label>
                <span class="weui-form-preview__value left">
                  <template v-for="(childs, clIndex) in course.childs">
                    {{ childs.baby_courses.baby_name}} {{childs.baby_courses.course_count}}
                  </template>
                </span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">包含课程</label>
                <span class="weui-form-preview__value left">
                  {{ course.course_names }}
                </span>
              </div>
            </div>
          </div>
          <cell title="赠送信息"></cell>
          <div class="weui-cell vux-cell-form-preview">
            <div class="weui-form-preview__bd">
              <template v-for="(child, cIndex) in course.childs" v-if="child.present_list">
                <template v-for="(present_list, cIndex) in child.present_list">
                  <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">赠送课包{{cIndex + 1}}</label>
                    <span class="weui-form-preview__value">
                        {{ present_list.package_name}}
                    </span>
                  </div>
                  <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">赠送课时</label>
                    <span class="weui-form-preview__value">
                        {{present_list.baby_name}} {{ present_list.course_count}}
                    </span>
                  </div>
                </template>
              </template>
              <template v-else>
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">无</label>
                </div>
              </template>
            </div>
          </div>
          <cell title="营销顾问" :value="course.user_name"></cell>
          <div class="weui-cell vux-cell-form-preview">
            <div class="weui-form-preview__bd">
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">付款时间</label>
                <span class="weui-form-preview__value">{{ course.pay_time }}</span>
              </div>
            </div>
          </div>
        </group>
      <!-- </div> -->
    </div>
  </div>
</template>
<script>
  import { mapActions } from 'vuex'
  import CellFormPreview from 'vux/src/components/cell-form-preview'
  import Cell from 'vux/src/components/cell'
  import Group from 'vux/src/components/group'

  export default {
    components: {
      CellFormPreview,
      Cell,
      Group
    },
    methods: {
      ...mapActions({
        'course_orders': 'course_orders'
      })
    },
    mounted () {
      this.course_orders(this.$route.query)
      .then((response) => {
        if (response.data.errcode === 0) {
          this.courseOrders = response.data.results
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    data () {
      return {
        noDataText: '暂无学员订单',
        courseOrders: []
      }
    }
  }
</script>
<style lang="less">
  @import '../less/base';
  .lesson-order {
    .weui-form-preview__value.left{
    }
  }
</style>
